// JQ的文档加载时
$(function () {
    // 判断是否支持 过渡
    if (!flux.browser.supportsTransitions) {
        alert("Flux Slider requires a browser that supports CSS3 transitions");
    }

    // 启动
    window.f = new flux.slider('#slider', {
        // 自动播放
        autoplay: true,
        // 分页
        pagination: false,
        // 控制
        controls: true,
        // // 宽度
        width: 750,
        // // 高度
        height: 500,
        transitions: ['concentric']
    });
    let arrIds = [1, 2, 3];
    arrIds.forEach(function (val, index, arr) {
        // 运行电子书中的轮播图
        new flux.slider('#index_swiper' + val, {
            // 自动播放
            autoplay: true,
            // 分页
            pagination: false,
            // 控制
            controls: true,
            // // 宽度
            width: 294,
            // // 高度
            height: 220,
            transitions: ['concentric']
        });
    })

    // 1. 绑定鼠标事件
    $('.electron-book-title p').mouseenter(function () {
        // console.log($(this).index())
        let index = $(this).index();
        // 高亮当前元素
        $(this).addClass('active');
        // 找到自己的兄弟
        $(this).siblings().removeClass('active');
        // 切换轮播列表显示

        // 找到所有的轮播列表元素（3个）
        // console.log($('.ebook-content-right ul'))
        // $('.ebook-content-right ul')
        // 根据索引匹配正确的元素 1个   // 把当前的显示
        // $('.ebook-content-right ul').eq(index).addClass('show');
        // 把其他的隐藏
        // $('.ebook-content-right ul').eq(index).siblings().removeClass('show');
        // 链式编程        一群         一个        本身           其他          其他
        $('.ebook-content-right ul').eq(index).addClass('show').siblings().removeClass('show');

    });


    // 新书畅销榜
    // 实现步骤
    // 1:鼠标移入到li
    $('.electron-book-right li').mouseenter(function () {
        let index = $(this).index();
        // console.log(index);
        // 2:针对当前进行操作
        //     2.1:div显示
        // $(this).find('div').show();
        // //     2.2：p要隐藏
        // $(this).find('p').hide();	
        // // 3:其他的li 中的div 隐藏
        // $(this).siblings().find('div').hide();
        // // p显示
        // $(this).siblings().find('p').show();

        // 两句的链式编程
        // 【当前：div显示 p要隐藏】 【其他:div显示 p要隐藏】
        // li      div       div    p
        // $(this).find('div').show().prev().hide();
        // li    其他li们   其他div们  其他div们  p们
        // $(this).siblings().find('div').hide().prev().show();
        // console.log(ps); 
        // 一句的链式编程
        // li      div       div    p      p      
        $(this).find('div').show().prev().hide()
            // p->li
            .parent()
            // 其他li们   其他div们 其他div们 p们
            .siblings().find('div').hide().prev().show();
        // 链式编程怎么联: 上一节火车尾，和下一节火车头，能是同一个元素
        // 链式编程不宜过长，不好维护，一般来说4-5个就比较多了

    });

    // 楼层的移入变色、移出恢复
    /*
    1:绑定li鼠标移入事件
    2：给li改变宽度为：80
    3：给元素改变背景颜色
    水平方向 -40/0
    4：数组[颜色1,颜色2]
    5: 获取元素索引，从颜色数
    组中取出
    6：移除恢复当前元素的默认
    状态
    */
    let colors = ['#93d46f', '#f65727', '#bb9dee', '#ff7394', '#c2ec51'];
    $('.floor li').hover(function () {
        let index = $(this).index();
        let color = colors[index];
        // 移入
        $(this).css({
            width: 80,
            backgroundPositionX: -40,
            backgroundColor: color
        })
    }, function () {
        // 移出
        $(this).css({
            width: 40,
            backgroundPositionX: 0,
            // 默认
            backgroundColor: '#f3f3f3'
        })
    });

    // 楼层点击li滚动
    $('.floor li').click(function () {
        let index = $(this).index();
        // 查找所有的section ，忽略最前面两个
        let jumpSection = $('section:gt(1)').get(index);
        //    console.log($('section'))
        //    console.log($jumpSection,index);
        // 获取该元素与父元素顶边的高度差
        let offsetTop = $(jumpSection).offset().top;
        // console.log(offsetTop);

        // 滚动(兼容性处理,有的浏览器用html,有的用body来滚动)
        $('html,body').stop().animate({scrollTop:offsetTop},1000);
    });

    // 需求： 浏览器滚动到了某个具体的位置  触发 slideDown 显示一个容器，并将输入框元素插入到该容器中
    // 反之， 触发 slideUp 收起容器，并将输入框放回原来的位置
    // 1:监视窗体滚动

    console.log($(window).scroll,$(window).on)
    // console.log($('window'))


    // $(window).scroll(function() {
    //     console.log('滚动了');
    //    let scrollTop =  $(window).scrollTop();
    //    console.log('卷进去了:',scrollTop);

    //    // 判断如果查出700 就展示搜索框容器
    //    if (scrollTop > 700) {
            
    //         let $form = $('.search-input-box form');
    //         console.log($form)

    //         // JQ append 都是移动
    //         $('.topBox').append($form);

    //         $('.topBox').slideDown();
    //    } else {
    //         let $form = $('.topBox form');
    //         $form.appendTo('.search-input-box')

    //         $('.topBox').slideUp();
    //    }


    // })

// 1. 绑定window的滚动时间
$(window).scroll(function() {
    // 2. 获取 当前卷进去的值   
    let scrollTop = $(window).scrollTop();
    // 3. 判断是否满足
    if (scrollTop > 700) {
        // 4. 找到form ,插入到盒子中
        $('.search-input-box form').appendTo('.topBox');
        // 5. 显示盒子
        $('.topBox').slideDown();
    } else {
		$('.search-input-box').append($('.topBox form'));
        // 6. 隐藏盒子
        $('.topBox').slideUp();
    }
    
})

});
